<template>
  <ul class="right-list-container" >
      <li  v-for="(item,i) in list" :key="i" >
      <span :class="{active:item.isSelect}" @click="hanleClick(item)">{{item.name}}</span>
      <span v-if="item.aside"  @click="hanleClick(item)" class="aside" :class="{active:item.isSelect}" >{{item.aside}}</span>
      <RightList :list="item.children" @select="hanleClick" class="rightlist"></RightList>
      </li>
  </ul>
</template>

<script>
export default {
name:"RightList",

props:{
    //list:[{name:xxx,isSelect:true,children:[{name:xxx,isSelect:true,children}]}]
    list:{
        type:Array,
        default:()=>[],
    }
},

methods:{
    hanleClick(item){
        if(!item.isSelect)
        this.$emit('select',item)
    }
}
}
</script>

<style lang="less" scoped>
@import "../../../style/var.less";
 .right-list-container{
     list-style: none;
     padding: 0;
     cursor: pointer;
     li{
         min-height:40px;
         line-height: 40px;
     }
     .rightlist{
         margin-left:1em;
     }
     
     .aside{
         margin-left:12px;
         font-size: 12px;
         color: @gray;
     }
     .active{
         color:@warn;
     }
 }
</style>